
// table buttons
Refresh.Web.EditorCommands.addCommand({name: 'FontForeColorPicker', type:'gallerybutton',execute: function(ftb,value,src) { Refresh.Web.ColorPickerUtility.show(ftb,src,'fore'); },getValue:Refresh.Web.QueryMethods.alwaysOn });
Refresh.Web.EditorCommands.addCommand({name: 'FontBackColorPicker', type:'gallerybutton',execute: function(ftb,value,src) { Refresh.Web.ColorPickerUtility.show(ftb,src,'back'); },getValue:Refresh.Web.QueryMethods.alwaysOn });


Refresh.Web.ColorPickerUtility = {
	
	button: null,
	
	ftb: null,
	
	container: null,
	
	init: function() {
		var c = document.createElement('div');
		this._container = c;
		c.id = 'ColorPickerPopup';
		c.style.position = 'absolute';
		c.style.display = 'none';
		c.style.border = 'solid 1px #ccc';
		c.style.padding = '1px';
		c.style.backgroundColor = '#fff';
		document.body.appendChild(c);
		
		// status
		var s = document.createElement('div');
		this.status = s;
		s.setAttribute('id','ColorPickerPopup_status');
		s.className = 'dropButton_Status';
		s.innerHTML = 'Web Colors';
		c.appendChild(s);		
		
		// add main table
		var t = document.createElement('table');
		this.table = t;
		t.setAttribute('id','ColorPickerPopupTable');
		t.cellPadding = 0;
		t.cellSpacing = 1;
		t.style.border = 0;
		t.style.backgroundColor = '#FAFAFA';
		t.style.fontSize = '1%';
		t.height = '100px';
		this._container.appendChild(t);

		var tb = document.createElement('tbody');
		t.appendChild(tb);
		//document.body.appendChild(t);	
			
		for (var r=6; r>=1; r--) {
			var tr = document.createElement('tr');
			tb.appendChild(tr);			
			for (var g=6; g>=4; g--) {
				
				for (var b=6; b>=1; b--) {
					var td = document.createElement('td');
					tr.appendChild(td);
					color = '#' + this.safeColor(r) + this.safeColor(g) + this.safeColor(b);
					td.color = td.style.backgroundColor = color;
					this.prepareCell(td);					
				}
			}
		}
		for (var r=6; r>=1; r--) {
			var tr = document.createElement('tr');
			tb.appendChild(tr);			
			for (var g=3; g>=1; g--) {
				
				for (var b=6; b>=1; b--) {
					var td = document.createElement('td');
					tr.appendChild(td);
					color = '#' + this.safeColor(r) + this.safeColor(g) + this.safeColor(b);
					td.color = td.style.backgroundColor = color;
					this.prepareCell(td);					
				}
			}
		}		
		
		// settings
		var b = document.createElement('div');
		this.bottom = b;
		b.setAttribute('id','ColorPickerPopup_button');
		b.className = 'dropButton_Bottom';
		b.innerHTML = '<table><tr><td><input type="text" style="width:80px" value="0" id="ColorPickerPopup_ColorHex" /></td>' + 
						'<td><div style="width:50px;border:1px solid #333;" id="ColorPickerPopup_Sample" >&nbsp;</div></td>' + 
						'<td><input type="button" value="OK" id="ColorPickerPopup_Button" /></tr>' + 
					'</table>';
		c.appendChild(b);
		
		Event.observe('ColorPickerPopup_Button','click', this.selectColor.bindAsEventListener(this));
		Event.observe('ColorPickerPopup_ColorHex','keyup', this.hexColorChanged.bindAsEventListener(this));
		
		this.sample = $('ColorPickerPopup_Sample');
		this.colorHex = $('ColorPickerPopup_ColorHex');
			
		//Refresh.Utility.makeUnselectable(this._container);
	},
	
	safeColor: function(value) {
		switch (value) {
			default:
			case 1: return '00';
			case 2: return '33';
			case 3: return '66';
			case 4: return '99';
			case 5: return 'CC';
			case 6: return 'FF';
		}
	},	

	hexColorChanged: function(value) {
		try {
			this.sample.style.backgroundColor = this.colorHex.value;
		} catch (e) {
		
		}
	},	
	
	show: function(ftb,button,colorType) {
		if (this._container == null) {
			this.init();	
		}
		
		this.ftb = ftb;
		this.button = button.node;
		this.colorType = colorType;
		
		// position 
		var targetPos = Position.positionedOffset(this.button);	
		var targetSize = Element.getDimensions(this.button);	
		this._container.style.left = targetPos[0] + 'px';
		this._container.style.top = (targetPos[1] + targetSize.height) + 'px';
			
		this._container.style.display = '';
	
		this.sample.style.backgroundColor = this.colorHex.value = ftb.queryCommandValue(colorType + 'color');
		
		this.docClickListener = this.onDocClick.bindAsEventListener(this);
		Event.observe(document, "click", this.docClickListener);
		Event.observe(this.ftb._getDocument(), "click", this.docClickListener);	
		
	},
	
	selectColor: function() {
		
		if (this.ftb)
			this.ftb.executeCommand(this.colorType + 'color', $F('ColorPickerPopup_ColorHex'));
			
		this.hide();
	
	},
	
	hide: function() {
		this._container.style.display = 'none';
	},
	
	onDocClick: function(event) {
	
		var x = Event.pointerX(event);
		var y = Event.pointerY(event);
		
		if (!(Position.within(this._container, x, y) || Position.within(this.button, x, y))) {	
			this.hide();
			Event.stopObserving(document, "click", this.docClickListener);	
			Event.stopObserving(this.ftb._getDocument(), "click", this.docClickListener);	
		}		
		
	},
	
	onCellOver: function(event) {
		var endTd = Event.findElement(event, 'TD');
		var color = endTd.color;
		endTd.style.borderColor = '#ccc';
		
		this.colorHex.value = color;
		this.sample.style.backgroundColor = color;		
	},
	
	onCellOut: function(event) {
		var endTd = Event.findElement(event, 'TD');	
		endTd.style.borderColor = endTd.color;		
	},	
	
	onCellClick: function(event) {
		var td = Event.findElement(event, 'TD');

		this.selectColor();
	},	
	
	prepareCell: function(td) {
		
		td.innerHTML = '&nbsp;';
		td.style.fontSize= '1%';
		td.style.width = '8px';		
		td.style.height = '8px';		
		td.style.border = 'solid 1px ' + td.style.backgroundColor;
		//td.style.borderWidth = '0 0 3px 3px';
		
		
		Event.observe(td, 'mouseover', this.onCellOver.bindAsEventListener(this));
		Event.observe(td, 'mouseout', this.onCellOut.bindAsEventListener(this));
		Event.observe(td, 'click', this.onCellClick.bindAsEventListener(this));					
	}	
};
